<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>删除数组中重复的元素</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
        color: gray;
    }

    span {
        color: black;
        font-size: 40px;
        display: block;
        margin-bottom: 10px;
    }
</style>
<script>
    // 构造函数
    function Person(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }

    // 向构造原型中添加一个system方法用来返回要输出的值
    Person.prototype.system = function () {
        return "我是" + this.name + "性别" + this.gender + "今年" + this.age + "岁"
    }
    // 对象实例化
    let person1 = new Person("张三", 16, "男")
    let person2 = new Person("李四", 18, "女")
    let person3 = new Person("张三", 16, "男")
    let person4 = new Person("龙六", 22, "女")
    let person5 = new Person("张三", 55, "男")

    // 将实例化的对象装入数组中
    let arr = [person1, person2, person3, person4, person5]

    // 最初的arr数组的遍历
    document.write("<span>最初的arr数组的遍历:</span>")
    arr.forEach(function (value, index, object) {
        document.write(object[index].system() + "<br>")
    })

    //方法一： 构造一个删除重复元素的函数
    // {
    //     document.write("<span>方法一：<br>--->删除重复元素后:</span>")
    //
    //     function Repeat_rm(Arr) {
    //         //外层循环从第一个元素开始，内层循环从外层循环的下一个元素开始
    //         for (let i = 0; i < Arr.length; i++) {
    //             // console.log(Arr[i].name)
    //             for (let j = i + 1; j < Arr.length; j++) {
    //                 // console.log("--->"+Arr[j].name)
    //                 if (Arr[i].name === Arr[j].name &&
    //                     Arr[i].age === Arr[j].age &&
    //                     Arr[i].gender === Arr[j].gender) {
    //                     Arr.splice(j, 1)
    //                     // 删除了元素后 删除的元素后面的元素都会前移一个位置
    //                     // 所以使用j--将索引前移一个位置
    //                     j--
    //                 }
    //             }
    //         }
    //         return Arr
    //     }
    //
    //     // 对象实例化
    //     let repeat_rm = new Repeat_rm(arr)
    //     repeat_rm.forEach(function (value, index, object) {
    //         document.write(object[index].system() + "<br>")
    //     })
    // }

    //方法二： 构造一个删除重复元素的函数
    {
        document.write("<span>方法二：<br>--->删除重复元素后:</span>")

        function Repeat_rm2(Arr) {
            for (let i = 0; i < Arr.length; i++) {
                /*  Arr.map((item) => item.name) 是一个数组方法，用于对数组 Arr 的每个元素执行一个函数，并将返回值组成一个新的数组。
                       具体用法如下：
                       Arr：要操作的数组。
                       map：数组方法，用于遍历数组并对每个元素执行指定的函数。
                       (item) => item.name：这是一个箭头函数，用于定义对每个元素的操作。(item) 表示当前遍历的数组元素，=> 之后的 item.name 表示对当前元素的操作，这里是提取 item 对象的 name 属性。
                        返回值：map 方法返回一个新的数组，其中包含对原始数组中每个元素执行指定函数后的返回值。
                  */
                if ((Arr.map((item) => item.name).indexOf(Arr[i].name, i + 1) !== -1)&&
                    (Arr.map((item) => item.age).indexOf(Arr[i].age, i + 1) !== -1)&&
                    (Arr.map((item) => item.gender).indexOf(Arr[i].gender, i + 1) !== -1)) {
                    Arr.splice(i, 1);
                }
            }
            return Arr
        }

        // 对象实例化
        let repeat_rm2 = new Repeat_rm2(arr)
        repeat_rm2.forEach(function (value) {
            document.write(value.system() + "<br>")
        })
    }


</script>
<body>
</body>
</html>